import QtQuick 2.15
import Qt5Compat.GraphicalEffects

Item{
    id: root
    width: childrenRect.width
    height: childrenRect.height

    // 多边形
    property int sides: 3
    property int radius: 70



    // 填充颜色

    Canvas {
        id: canvas

        anchors.centerIn: parent
        width: 2 * root.radius
        height: 2 * root.radius

        onPaint: {
            var ctx = getContext("2d")
            ctx.clearRect(0, 0, width, height)

            // 设置样式
            ctx.fillStyle = "steelblue"
            ctx.strokeStyle = "navy"
            ctx.lineWidth = 2

            // 绘制正多边形
            drawRegularPolygon(ctx, width/2, height/2, root.radius, root.sides) // 六边形

            ctx.fill()
            ctx.stroke()
        }

        function drawRegularPolygon(ctx, centerX, centerY, radius, sides) {
            ctx.beginPath()
            for (var i = 0; i <= sides; i++) {
                var angle = i * 2 * Math.PI / sides - Math.PI/2 // 调整起始角度使一个顶点朝上
                var x = centerX + radius * Math.cos(angle)
                var y = centerY + radius * Math.sin(angle)
                if (i === 0) {
                    ctx.moveTo(x, y)
                } else {
                    ctx.lineTo(x, y)
                }
            }
            ctx.closePath()
        }

        Component.onCompleted: requestPaint()
    }
}
